﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /**/
        
        .imgBox
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=C:\Waterlilies.jpg);
            width: 100px;
            height: 100px;
        }
        .blueRow
        {
            background-color: Blue;
        }
        .redRow
        {
            background-color: Red;
        }
        
        .yellowRow
        {
            background-color: Yellow;
        }
    </style>
    <script src="Common.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tab = null;
        var bodyRows = null;

        BindEvent(window, "load", function (e) {
            tab = Get("tabBook");
            bodyRows = tab.tBodies[0].rows;
            var cbxAll = tab.tHead.rows[0].cells[0].children[0];

            // 全选
            BindEvent(cbxAll, "click", function (e) {
                for (var i = 0; i < bodyRows.length; i++) {
                    var cbx = bodyRows[i].cells[0].children[0];
                    //cbx.checked = cbxAll.checked;
                    if (cbx.checked != cbxAll.checked) {
                        cbx.click();
                    }
                }
            });

            for (var i = 0; i < bodyRows.length; i++) {
                BindRowEvent(bodyRows[i]);
            } // end for

            // 购买
            BindEvent(tab.tFoot.rows[0].cells[1].children[0], "click", function (e) {
                var box = Get("divBox");
                box.innerHTML = "";
                for (var i = 0; i < bodyRows.length; i++) {
                    if (bodyRows[i].cells[0].children[0].checked) {
                        box.innerHTML += bodyRows[i].cells[1].innerHTML;
                    }
                }

            });

            // 上架
            BindEvent("btnSave", "click", function (e) {
                var bookInfo = {};
                bookInfo.BookName = Get("txtBookName").value;
                bookInfo.BookName = Get("txtBookName").value; ;
                //bookInfo.setAttribute("BookName", Get("txtBookName").value); ;
                bookInfo.Price = Get("txtPrice").value;
                bookInfo.ImgPath = Get("flePhoto").value;

                var newRow = AddRow(bookInfo);
                //newRow.BookInfo = bookInfo;
                //newRow.setAttribute("BookInfo", "object");
                BindRowEvent(newRow);

            });

        });

        // 绑定行事件
        function BindRowEvent(row) {
            var cbx = row.cells[0].children[0];
            var txtNum = row.cells[2].children[0];

            // 隔行变色
            //bodyRows[i].style.backgroundColor = bodyRows[i].rowIndex % 2 ? "red" : "yellow";
            if (row.rowIndex % 2) {
                ChangeClass(row, "", "redRow");
            }
            else {
                ChangeClass(row, "", "yellowRow");
            }

            // 鼠标指向变蓝色
            BindEvent(row, "mouseover", function (e) {
                var ele = GetEventSrcElement(e);
                var tr = GetEleTr(ele);
                tr.style.backgroundColor = "blue";
                ChangeClass(tr, "", "blueRow");
                //CancelBubble(e);
            });
            // 鼠标移出变回原色
            BindEvent(row, "mouseout", function (e) {
                var ele = GetEventSrcElement(e);
                var tr = GetEleTr(ele);
                //ChangeClass(tr, "blueRow", "");
                tr.style.backgroundColor = "";
                //CancelBubble(e);
            });

            // 初始化为不可用
            row.cells[2].children[0].disabled = true;
            // 设置选中 数量可用状态
            BindEvent(cbx, "click", function (e) {
                var ele = GetEventSrcElement(e);
                var tr = GetEleTr(ele);
                var txtNum = tr.cells[2].children[0];
                //tr.cells[2].children[0].readOnly = !ele.checked;
                txtNum.disabled = !ele.checked;
                if (!ele.checked) {
                    txtNum.value = "";
                }
                else {
                    txtNum.value = "1";
                }
                CountRowData(tr);
                CountTabData(tab);

            });

            // 只允许输入数字
            BindEvent(txtNum, "keypress", function (e) {
                var code = GetCode(e);
                if (code < 47 || code > 57) {
                    CancelEvent(e);
                }
            });

            // 只允许输入数字
            BindEvent(txtNum, "keyup", function (e) {
                var ele = GetEventSrcElement(e);
                if (isNaN(ele.value * 1)) {
                    ele.value = "";
                }
                var tr = GetEleTr(ele);
                CountRowData(tr);
                CountTabData(tab);

            });
        }

        // 新增行
        function AddRow(bookInfo) {
            // 克隆新的tr
            var newRow = tab.tBodies[1].rows[0].cloneNode(true);
            var spaArr = newRow.cells[1].getElementsByTagName("SPAN");
            SetText(spaArr[0], bookInfo.BookName);
            SetText(spaArr[1], bookInfo.Price);
            var imgBox = GetElementByTagClass(newRow.cells[1], "DIV", "imgBox")[0];
            // 必须先将元素添加到文档树
            tab.tBodies[0].appendChild(newRow);

            imgBox.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = bookInfo.ImgPath;
            return newRow;
        }

        // 传入父元素 元素类型 className 查找符合要求的元素
        function GetElementByTagClass(element, tagName, className) {
            var eleArr = element.getElementsByTagName(tagName);
            var outArr = new Array();
            for (var i = 0; i < eleArr.length; i++) {
                if (eleArr[i].className.indexOf(className) != -1) {
                    outArr.push(eleArr[i]);
                }
            }

            return outArr;
        }

        // 计算行统计数据
        function CountRowData(tr) {

            var num = tr.cells[2].children[0].value * 1;
            var price = GetText(tr.cells[1].getElementsByTagName("SPAN")[1]) * 1;

            SetText(tr.cells[3].children[0], (price * num).toFixed(2));
        }

        // 统计表数据

        function CountTabData(tab) {
            //Get("tabBook");
            var bodyRows = tab.tBodies[0].rows;
            var numSum = 0;
            var priceSum = 0;
            for (var i = 0; i < bodyRows.length; i++) {
                numSum += bodyRows[i].cells[2].children[0].value * 1;
                priceSum += GetText(bodyRows[i].cells[3].children[0]) * 1;
            }

            SetText(tab.tFoot.rows[0].cells[2].children[0], numSum);
            SetText(tab.tFoot.rows[0].cells[3].children[0], priceSum.toFixed(2));
        }

        // 根据行内元素找到行对象
        function GetEleTr(element) {
            var tr = element;
            while (tr.nodeName != "TR") {
                tr = tr.parentNode;
            }

            return tr;
        }

    
    </script>
</head>
<body>
    <div>
        <div>
            书名：
            <input id="txtBookName" type="text" />
            价格：
            <input id="txtPrice" type="text" />
            照片：
            <input id="flePhoto" type="file" />
            <input id="btnSave" type="button" value="上架" />
        </div>
        <div style="width: 50%; float: left;">
            <table id="tabBook" border="1">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" />
                        </th>
                        <th>
                            书籍
                        </th>
                        <th>
                            购买数量
                        </th>
                        <th>
                            购买
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            <div>
                                <div>
                                    <img alt="" style="width: 100px; height: 100px;" />
                                </div>
                                <div>
                                    <div>
                                        书名:<span>Javascript高级编程</span></div>
                                    <div>
                                        价格:<span>100.5</span>$
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                        <td>
                            <span></span>$
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            <div>
                                <div>
                                    <img alt="" style="width: 100px; height: 100px;" />
                                </div>
                                <div>
                                    <div>
                                        书名:<span>Java高级编程</span></div>
                                    <div>
                                        价格:<span>200.7</span>$
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                        <td>
                            <span></span>$
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            <div>
                                <div>
                                    <img alt="" style="width: 100px; height: 100px;" />
                                </div>
                                <div>
                                    <div>
                                        书名:<span>C#高级编程</span></div>
                                    <div>
                                        价格:<span>100</span>$
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                        <td>
                            <span></span>$
                        </td>
                    </tr>
                </tbody>
                <tbody style="display: none">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            <div>
                                <div>
                                    <div class="imgBox">
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        书名:<span></span></div>
                                    <div>
                                        价格:<span></span>$
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                        <td>
                            <span></span>$
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <input type="button" value="购买" />
                        </td>
                        <td>
                            数量:<span></span>本
                        </td>
                        <td>
                            总价:<span></span>$
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div id="divBox" style="width: 48%; float: left; background-color: Yellow;">
            <div>
                <div style="float: left; width: 50%;">
                    <img alt="" style="width: 100px; height: 100px;" />
                </div>
                <div style="float: left; width: 45%;">
                    <div>
                        书名:<span>C#高级编程</span></div>
                    <div>
                        价格:<span>100</span>$
                    </div>
                    <div>
                        数量:<span>2</span>本</div>
                    <div>
                        支付:<span>200</span>$</div>
                    <div>
                        <input type="button" value="删除" /></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
